import welcome from "@/assets/images/welcome.png";
import "./index.less";
import { Avatar, Space, Row, Col, Card, Layout } from 'antd'
import LineChart from "@/views/reports/lineChart";
import PieChart from "@/views/reports/pieChart";
import ColumnChart from "@/views/reports/columnChart";
import Panel from '@/components/Panel';
import Icon from '@/components/Icon';
import { Content } from "antd/lib/layout/layout";
import {CSSProperties} from 'react';

const url = 'https://api.dicebear.com/7.x/miniavs/svg';

const projectset = [{ title: '道真项目管理系统 任务数', total: 300 }];
for (let i = 0; i < 7; i += 1) {
  projectset.push({
    title: `系统 ${i} 任务数`,
    total: 323
  });
}


const product = [
  { title: "产品 1", content: "This is card 1" },
  { title: "产品 2", content: "This is card 2" },
  { title: "产品 3", content: "This is card 3" },
  { title: "产品 4", content: "This is card 4" },
  { title: "产品 5", content: "This is card 5" },
  { title: "产品 6", content: "This is card 6" },
  { title: "产品 7", content: "This is card 7" },
  { title: "产品 8", content: "This is card 8" },
];

const history = [
  { title: "登录", content: "首页" },
  { title: "更改", content: "产品" },
  { title: "添加", content: "项目集" },
  { title: "删除", content: "任务" },
  { title: "退出", content: "系统" }
];

  const style: CSSProperties = { width: '100%', alignItems: 'center' }

const Home = () => {

  return (
    <div className="home card">
      <Layout className="full-layout page dashboard-page" >
        <Content>
          <Row gutter={24}>
            <Col md={6}>
              <Panel className="welcome" height={340} header={false} cover>
                <Icon type="QqOutlined" antd />
                <Space size={16} wrap>
                  <Avatar src={<img src={url} alt="avatar" />} size={60} />
                </Space>
                <b>
                  <h5 className="text-muted">欢迎 Admin</h5>
                </b>
                
              </Panel>
            </Col>

            <Col md={6}>
              <Panel title="项目集" height={300}>
                <div className="flex">
                  <div className="flex-none sales-order">
                    <ul>
                      {projectset.map((item, i) => (
                        <li key={item.title}>
                          <span>{item.title}</span>
                          <span>{item.total}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </Panel>
            </Col>
            <Col md={6}>
              <Panel title="产品" height={300}>
                <div className="flex">
                  <div className="flex-none sales-order">
                    <ul>
                      {product.map((item, i) => (
                        <li key={item.title}>
                          <span>{item.title}</span>
                          {/* <span>{item.content}</span> */}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </Panel>
            </Col>
            <Col md={6}>
              <Panel title="操作历史" height={300}>
                <div className="flex">
                  <div className="flex-none sales-order">
                    <h4>最近三天</h4>
                    <ul>
                      {history.map((item, i) => (
                        <li key={item.title}>
                          <span>{item.title}</span>
                          <span>{item.content}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </Panel>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col md={24} style={style}>
              <Panel title="饼图" height={560}>
                  <PieChart/>
              </Panel>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col md={24} style={style}>
              <Panel title="柱状图" height={360} >
                <ColumnChart />
              </Panel>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col md={24} style={style}>
              <Panel title="折线图" height={360}>
                <LineChart></LineChart>
              </Panel>
            </Col>
          </Row>
        </Content>
      </Layout>
    </div >

  );
};

export default Home;
